//遍历一颗DOM树，包含所有node节点

//访问信息
function visited(node) {
    if (node instanceof Comment) {
        //注释
        console.log("comment==>", node.textContent);
    }
    if (node instanceof Text) {
        // 文本
        if (node.textContent.trim()) {
            console.log("文本==>", node.textContent);
        }

    }
    if (node instanceof Element) {
        //元素
        console.log("元素==>", `<${node.tagName.toLowerCase()}>`)
    }
}

//深度优先遍历 //递归的本质就是栈
function dfeDom(root) {
    //首先访问当前节点
    visited(root)

    //在访问子节点
    //childNodes 是获取所有的节点包含注释和文本
    //children 是只获取元素,不包含注释问文本节点
    Array.from(root.childNodes).forEach(node => {
        dfeDom(node)
    });

}

let root = document.getElementById('box')
// dfeDom(root)


//用栈实现广度优先遍历

function dfeByStackDom(root) {
    let stack = [root]

    while (stack.length > 0) {
        let node = stack.pop()
        visited(node)

        Array.from(node.childNodes).reverse().forEach(itemNode => {
            stack.push(itemNode)
        })
    }
}

dfeByStackDom(root)
dfeDom(root)







//广度优先遍历
function bfeDom(root) {
    //使用队列先进先出的原则实现
    let queue = [root]

    while (queue.length > 0) {
        let curNode = queue.shift()
        visited(curNode)

        //再推入当前节点的孩子入队
        curNode.childNodes.forEach(node => {
            queue.push(node)
        })
    }
}

// bfeDom(root)


